<#include "/include/table/properties.ftl">
<#macro mapperEl$ value>${r"${"}${value}}</#macro>
<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>${tableComment}管理</el-breadcrumb-item>
        <el-breadcrumb-item>${tableComment}列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="search-form">
        <el-form ref="searchForm" :model="searchParams" inline>
        <#list table.indexes as column>
            <#include "/include/column/properties.ftl">
            <#if column.validStatus>
            <#elseif column.select>
            <el-form-item label="${columnComment}">
                <el-select v-model="searchParams.${fieldName}" clearable placeholder="全部">
                    <template v-for="(item, index) in ${fieldNameExceptKey}SelectList" :key="index">
                        <el-option :value="item.value">{{item.text}}</el-option>
                    </template>
                </el-select>
            </el-form-item>
            <#elseif column.fkSelect>
            <el-form-item label="${columnComment}">
                <el-select v-model="searchParams.${fieldName}" clearable placeholder="全部">
                    <template v-for="(item, index) in ${fieldNameExceptKey}SelectList" :key="index">
                        <el-option :value="item.${column.fkSelectColumn.valueName?uncap_first}">{{item.${column.fkSelectColumn.textName?uncap_first}}}</el-option>
                    </template>
                </el-select>
            </el-form-item>
            <#elseif column.pk>
            <el-form-item label="${columnComment}">
                <el-input v-model<#if isInteger>.number<#else>.trim</#if>="searchParams.${fieldName}" clearable />
            </el-form-item>
            <#elseif (isInteger || isDecimal)>
            <el-form-item label="${columnComment}">
                <el-input-number v-model="searchParams.${fieldName}Min" />
                <span>-</span>
                <el-input-number v-model="searchParams.${fieldName}Max" />
            </el-form-item>
            <#elseif (isString)>
            <el-form-item label="${columnComment}">
                <el-input v-model.trim="searchParams.${fieldName}Contains" clearable />
            </el-form-item>
            <#elseif (isDate)>
            <el-form-item label="${columnComment}">
                <el-date-picker
                        v-model="searchParams.${fieldName}Range"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="YYYY-MM-DD">
                </el-date-picker>
            </el-form-item>
            <#elseif (isDateTime)>
            <el-form-item label="${columnComment}">
                <el-date-picker
                        v-model="searchParams.${fieldName}Range"
                        type="daterange"
                        :default-time="['00:00:00', '23:59:59']"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="YYYY-MM-DD HH:mm:ss">
                </el-date-picker>
            </el-form-item>
            </#if>
            </#list>
            <!-- <template v-for="item in searchParamsConfig" :key="item.field">
                <el-form-item :label="item.label" :prop="item.field">
                    <el-input v-model.trim="searchParams[item.field]" clearable />
                </el-form-item>
            </template> -->
            <el-form-item>
                <el-button @click="search" type="primary" icon="el-icon-search">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>
<#--    <#if table.validStatusColumn??>-->
<#--    <deleted-tabs v-model="${table.validStatusColumn.targetName?uncap_first}" @change="changeValidSearch"></deleted-tabs>-->
<#--    <#else>-->
<#--    <el-divider></el-divider>-->
<#--    </#if>-->
    <div class="list-table">
        <div class="operation-btns">
            <el-button @click="add" icon="el-icon-plus" type="primary">添加</el-button>
            <#if (table.hasUniPk)>
            <template v-if="selectedRows.length > 0">
                <el-button @click="enableSelected" icon="el-icon-check" type="success">启用</el-button>
                <el-button @click="disableSelected" icon="el-icon-close" type="warning">禁用</el-button>
                <el-button @click="deleteSelected" icon="el-icon-delete" type="danger">删除</el-button>
            </template>
            </#if>
        </div>
        <el-table ref="tableRef" :data="dataPageList.list"<#if (table.hasUniPk)> @selection-change="handleSelectionChange"</#if> @sort-change="handleSortChange" @row-dblclick="detail" stripe>
            <#if (table.hasUniPk)>
            <el-table-column type="selection" width="55" fixed="left"></el-table-column>
            </#if>
            <el-table-columns :columns="columns"></el-table-columns>
            <el-table-column prop="operations" label="操作" width="140" fixed="right">
                <template #default="{row}">
                    <table-operations :edit="true" @edit="edit(row)"
                                      :copy="true" @copy="edit(row, true)"
                                    <#if table.validStatusColumn??>
                                    <#assign column = table.validStatusColumn>
                                    <#include "/include/column/properties.ftl">
                                      :deleted="row.deleted"
                                      :disable="true" @disable="switchDeleted(row)"
                                      :enable="true" @enable="switchDeleted(row)"
                                    <#else>
                                      :switch-deleted="false"
                                    </#if>
                                      :del="true" @del="del(row)">
                    </table-operations>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :total="dataPageList.total" :page-sizes="pageSizeOptions" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    <${tablePath}-detail :pk="editPk" :visible="detailDrawerVisible" @edit="edit" @del="del"<#list table.fkSelectColumns as column><#include "/include/column/properties.ftl"> :${columnExceptKey}-select-list="${fieldNameExceptKey}SelectList"</#list> />
    <${tablePath}-save :pk="editPk" :visible="saveDrawerVisible" :operateType="operateType" @save="save"<#list table.fkSelectColumns as column><#include "/include/column/properties.ftl"> :${columnExceptKey}-select-list="${fieldNameExceptKey}SelectList"</#list> />
</template>

<script lang="ts">
import { defineComponent, reactive, ref, provide, onMounted } from 'vue'
import { OperateRequests } from '@/composables/models'
import { PageSizeOptions<#if table.hasAutoIncUniPk>, SortEnum</#if> } from '@/constants'
import { getOperations<#if (table.hasUniPk)>, getSelectionWithOperations</#if> } from '@/composables/operations'
import { <#if (table.fkSelectColumns?size > 0)>listSearch, </#if>pageListSearch, handleSortChange } from '@/composables/requests'
import ElTableColumns from '@/components/ElTableColumns.vue'
import TableOperations from '@/components/TableOperations.vue'
import ${className}Save from './${className}Save.vue'
import ${className}Detail from './${className}Detail.vue'

const columns = [
    <#list table.columns as column>
    <#include "/include/column/properties.ftl">
    <#if (isContent || column.validStatus)>
    <#else>
    <#if (column.select || column.fkSelect)>
    { name: "${fieldName}", label: "${columnComment}"<#if (column.index)>, sortable: true</#if> },
    <#elseif column.imgUrl>
    { name: "${fieldName}", label: "${columnComment}"<#if (column.index)>, sortable: true</#if>, img: true },
    <#elseif isDate>
    { name: "${fieldName}", label: "${columnComment}"<#if (column.index)>, sortable: true</#if>, width: 90 },
    <#elseif isTime>
    { name: "${fieldName}", label: "${columnComment}"<#if (column.index)>, sortable: true</#if>, width: 90 },
    <#elseif isDateTime>
    { name: "${fieldName}", label: "${columnComment}"<#if (column.index)>, sortable: true</#if>, width: 140 },
    <#else>
    { name: "${fieldName}", label: "${columnComment}"<#if (column.index)>, sortable: true</#if> },
    </#if>
    </#if>
    </#list>
]

<#if (table.hasUniPk)>
<#list pks as column>
<#include "/include/column/properties.ftl">
const pkField = '${fieldName}'
const pksField = '${fieldName}s'
</#list>
</#if>
const pkFields = [<#list pks as column><#include "/include/column/properties.ftl">'${fieldName}'<#if (column?has_next)>, </#if></#list>]
const apisRequest: OperateRequests = {
    disable: { url: '/${tablePath}/disable', method: 'PATCH' },
    enable: { url: '/${tablePath}/enable', method: 'PATCH' },
    delete: { url: '/${tablePath}/delete', method: 'DELETE' }
}
<#list table.selectColumns as column>
<#include "/include/column/properties.ftl">

const ${fieldNameExceptKey}SelectList = [
    <#list column.selectOptions as option>
    { <#if (isInteger)>value: ${option.value}, text: '${option.text}'<#else>value: '${option.value}', text: '${option.text}'</#if> }<#if option?has_next>, </#if>
    </#list>
]
</#list>

const searchParamsConfig = [
    <#list table.indexes as column>
    <#include "/include/column/properties.ftl">
    <#if (isString)>
    { label: '${columnComment}', type: 'string', field: '${fieldName}Contains' },
    </#if>
    </#list>
]

export default defineComponent({
    components: { ElTableColumns, TableOperations, ${className}Save, ${className}Detail },
    name: "${className}Index",
    setup() {
        const searchParams = reactive<any>({})
        const defaultSortParams = {
            <#if table.hasAutoIncUniPk>
            <#list table.pks as column>
            <#include "/include/column/properties.ftl">
            '${fieldName}Sort': SortEnum.DESC
            </#list>
            </#if>
        }
        const sortParams = reactive<any>({ ...defaultSortParams })
        const tableRef = ref()

        const { pageNum, pageSize, dataPageList, search } = pageListSearch({ url: '/${tablePath}/page-list', method: 'GET' }, searchParams, sortParams<#if !(table.hasUniPk)>, (list: any[]) => list.map(item => ({ ...item, key: <#list pks as column><#include "/include/column/properties.ftl">item.${fieldName}<#if column?has_next> + ':' + </#if></#list> }))</#if>)
        <#if (table.hasUniPk)>
        const { selectedRows, handleSelectionChange, disableSelected, enableSelected, deleteSelected } = getSelectionWithOperations(apisRequest, pkField, pksField)

        const afterOperation = () => {
            tableRef.value.clearSelection()
        }
        </#if>
        <#list table.fkSelectColumns as column>
        <#include "/include/column/properties.ftl">

        const ${fieldNameExceptKey}SearchParams = reactive<any>({
            <#list column.fkSelectColumn.conditions as condition>
            ${condition.fieldTargetName?uncap_first}: '${condition.value}'<#if condition?has_next>,</#if>
            </#list>
        })
        const get${propertyExceptKey}SelectList = listSearch({ url: '/${column.fkSelectColumn.foreignTargetTableName?replace("_", "-")}/list', method: 'GET' }, ${fieldNameExceptKey}SearchParams, {})
        </#list>

        const { editPk, saveDrawerVisible, detailDrawerVisible, operateType, detail, add, del, edit<#if table.validStatusColumn??>, switchDeleted</#if>, save } = getOperations(apisRequest, dataPageList, pkFields, search)
        provide('closeSaveDrawer', () => saveDrawerVisible.value = false)
        provide('closeDetailDrawer', () => detailDrawerVisible.value = false)

        onMounted(() => {
            search()
            <#list table.fkSelectColumns as column>
            <#include "/include/column/properties.ftl">
            get${propertyExceptKey}SelectList.search()
            </#list>
        })

        return {
            tableRef,
            columns,
            handleSortChange: handleSortChange(sortParams, defaultSortParams, search),
            <#if (table.hasUniPk)>
            handleSelectionChange,
            selectedRows,
            </#if>
            pageSizeOptions: PageSizeOptions,
            <#list table.selectColumns as column>
            <#include "/include/column/properties.ftl">
            ${fieldNameExceptKey}SelectList,
            </#list>
            <#list table.fkSelectColumns as column>
            <#include "/include/column/properties.ftl">
            ${fieldNameExceptKey}SelectList: get${propertyExceptKey}SelectList.dataList,
            </#list>
            searchParams, pageNum, pageSize,
            searchParamsConfig,
            search,
            dataPageList,
            operateType,
            saveDrawerVisible,
            detailDrawerVisible,
            editPk,
            detail,
            add,
            edit,
            save,
            <#if table.validStatusColumn??>
            switchDeleted,
            </#if>
            del,
            <#if (table.hasUniPk)>
            disableSelected: disableSelected(afterOperation),
            enableSelected: enableSelected(afterOperation),
            deleteSelected: deleteSelected(() => {
                afterOperation();
                search();
            })
            </#if>
        }
    }
})
</script>

<style scoped>
</style>
